<template>
  <el-container>
    <!-- 跑马灯 -->
    <el-row class="outer-row carousel">
      <el-col :span="24">
        <el-carousel
          trigger="click"
          height="300px"
          type="card"
          :interval="3000"
        >
          <el-carousel-item
            v-for="item in adver"
            :key="item.id"
          >
            <div
              class="img-container"
              style="text-align:center;overflow:hidden;width:100%;"
            >
              <img :src="item.img" />
              <span>{{ item.text }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider class="divider">
      <span>新闻动态</span>
    </el-divider>
    <!-- 新闻行 -->
    <el-row class="outer-row news">
      <!-- 占位 -->
      <el-col
        :span="4"
        style="height:10px;"
      ></el-col>
      <el-col :span="16">
        <!-- 每个新闻 -->
        <el-card
          shadow="hover"
          class="card"
          v-for="item in news"
        >
          <el-row :gutter="20">
            <!-- 新闻文字 -->
            <el-col :span="14">
              <!-- 标题 -->
              <el-row class="title-row">
                <span class="news-title">{{ item.newsTitle }}</span>
              </el-row>
              <!-- 内容 -->
              <el-row class="content-row">
                <span class="news-content">{{ item.newsContent }}</span>
              </el-row>
              <!-- 发布时间 -->
              <el-row class="date-row">
                <span class="report-date">{{ item.reportDate }}</span>
              </el-row>
            </el-col>
            <!-- 新闻图片 -->
            <el-col :span="10">
              <el-image
                class="news-img"
                :src="item.newsImg"
                fit="contain"
              ></el-image>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 占位 -->
      <el-col
        :span="4"
        style="height:10px;"
      ></el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider class="divider">
      <span>必看好房</span>
    </el-divider>
    <!-- 房源行 -->
    <el-row class="outer-row house">
      <!-- 占位 -->
      <el-col
        :span="1"
        style="height:10px;"
      ></el-col>
      <!-- 房源列 -->
      <el-col :span="22">
        <!-- 每个房源 -->
        <el-card
          shadow="hover"
          class="card"
          v-for="item in house"
          @click.native="toDetails(item.houseId)"
        >
          <el-row :gutter="20">
            <!-- 房源图片 -->
            <el-col :span="8">
              <el-image
                class="house-img"
                :src="item.img"
                fit="contain"
              ></el-image>
            </el-col>
            <!-- 房源文字信息 -->
            <el-col
              :span="10"
              style="padding-left:40px;"
            >
              <!-- 标题 -->
              <el-row class="title-row">
                <span class="house-title">{{ item.title }}</span>
              </el-row>
              <!-- 描述 -->
              <el-row class="advan-row">
                <span class="advantage">{{ item.advantage }}</span>
              </el-row>
              <!-- 地址 -->
              <el-row class="address-row">
                <span class="address">{{ item.address }}</span>
              </el-row>
              <!-- 发布日期 -->
              <el-row class="date-row">
                <span class="house-date">发布日期 {{ item.houseDate }}</span>
              </el-row>
            </el-col>
            <!-- 房源数字信息 -->
            <el-col
              :span="6"
              style="padding-left:60px;padding-right:30px;"
            >
              <!-- 类型 -->
              <el-row class="type-row">
                <span class="type-id">
                  <div v-if="item.typeId == '0'">
                    <el-tag
                      type="success"
                    >新房</el-tag>
                  </div>
                  <div v-if="item.typeId == '1'">
                    <el-tag
                      type="warning"
                    >二手房</el-tag>
                  </div>
                  <div v-if="item.typeId == '2'">
                    <el-tag
                      type="primary"
                    >商业租房</el-tag>
                  </div>
                  <div v-if="item.typeId == '100'">
                    <el-tag type="info">其他</el-tag>
                  </div>
                </span>
              </el-row>
              <!-- 面积 -->
              <el-row class="area-row">
                <span class="area">{{ item.area }} ㎡</span>
              </el-row>
              <!-- 房租 -->
              <el-row class="price-row">
                <span class="price">{{ item.price }} ￥/月</span>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 占位 -->
      <el-col
        :span="1"
        style="height:10px;"
      ></el-col>
    </el-row>

    <el-footer>Copyright © 2020-present HorsenLiu</el-footer>

  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
import news from '@/api/news';
import house from '@/api/house';
import star from '@/api/star';

export default {
  data() {
    return {
      adver: [
        { id: 0, text: '山河宸园', img: require('../../assets/adver/1.png') },
        { id: 1, text: '紫樾府', img: require('../../assets/adver/2.png') },
        { id: 2, text: '菁华公寓', img: require('../../assets/adver/3.png') },
        { id: 3, text: '锦绣樾江府', img: require('../../assets/adver/4.png') }
      ],
      news: {},
      house: {},
      searchObj: { isReviewed: 1 }, // 查询条件
      options: [
        {
          value: 0,
          label: '新房'
        },
        {
          value: 1,
          label: '二手房'
        },
        {
          value: 2,
          label: '商业租房'
        }
      ],
      loggedUser: {
        name: '',
        userId: ''
      }
    };
  },
  computed: {
    ...mapGetters(['name', 'userId'])
  },
  created() {
    this.loggedUser.name = this.$store.state.user.name;
    this.loggedUser.userId = this.$store.state.user.userId;
    this.fetchNews();
    this.fetchHouse();
  },
  methods: {
    // 获取新闻
    fetchNews() {
      news
        .getAllNews()
        .then(response => {
          this.news = response.data.items;
        })
        .catch(response => {
          this.$message({
            type: 'error',
            message: '获取新闻失败'
          });
        });
    },
    // 获取房源
    fetchHouse() {
      house
        .getHouseListByPage(1, 1000, this.searchObj)
        .then(response => {
          this.house = response.data.items;
        })
        .catch(response => {
          this.$message({
            type: 'error',
            message: '获取房源失败'
          });
        });
    },
    // 跳转详情
    toDetails(id) {
      this.$router.push('/house/details/' + id);
    }
  }
};
</script>

<style lang="scss" scoped>
$dark_gray: #99a9bf;
$light_gray: #d3dce6;
$title: #304156;
$house_title: #826158;
$house_price: #ffc041;

.el-footer {
  color: $dark_gray;
  text-align: center;
  line-height: 60px;
}
.el-container {
  padding: 30px 40px 30px 40px;
}
/* 外层row */
.outer-row {
  margin-bottom: 20px;
}
/* 走马灯图片 */
.img-container {
  position: relative;
  height: 100%;
  span {
    font-weight: 700;
    font-size: 30px;
    color: #eee;
    position: absolute;
    margin: auto;
    height: 40px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
/* 分割线 */
.divider {
  margin-top: 40px;
  margin-bottom: 40px;
  span {
    font-size: 20px;
    color: $title;
  }
}
/* 新闻row */
.news {
  .card {
    margin-bottom: 10px;
  }
  .title-row {
    height: 30px;
  }
  .news-title {
    color: $title;
    font-size: 16px;
    font-weight: 700;
  }
  .content-row {
    height: 103px;
  }
  .news-content {
    font-size: 15px;
  }
  .date-row {
    height: 15px;
    position: relative;
  }
  .report-date {
    line-height: 15px;
    font-size: 13px;
    color: $dark_gray;
    position: absolute;
    bottom: 0;
  }
  .news-img {
    background-color: $dark_gray;
    width: 100%;
    height: 100%;
  }
}
/* 房源row */
.house {
  .card {
    margin: 0 auto 20px auto;
  }
  .title-row {
    height: 30px;
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .house-title {
    line-height: 30px;
    font-size: 22px;
    font-weight: 700;
    color: $title;
  }
  .advan-row {
    height: 20px;
    margin-bottom: 30px;
  }
  .advantage {
    line-height: 20px;
    font-size: 17px;
    color: $title;
  }
  .address-row {
    height: 20px;
    margin-bottom: 35px;
  }
  .address {
    line-height: 20px;
    font-size: 17px;
    font-weight: 700;
    color: $house_title;
  }
  .date-row {
    height: 18px;
  }
  .house-date {
    line-height: 18px;
    font-size: 14px;
    color: $dark_gray;
  }
  .type-row {
    height: 40px;
    margin-bottom: 25px;
    margin-top: 15px;
    text-align: right;
  }
  .el-tag {
    height: 38px;
    padding: 9px 20px;
    font-size: 16px;
    line-height: 18px;
  }
  .area-row {
    height: 40px;
    margin-bottom: 25px;
    text-align: right;
  }
  .area {
    line-height: 40px;
    font-size: 24px;
    font-weight: 700;
    color: $dark_gray;
  }
  .price-row {
    height: 40px;
    text-align: right;
  }
  .price {
    line-height: 40px;
    font-size: 26px;
    font-weight: 700;
    color: $house_price;
  }
  .house-img {
    background-color: $light_gray;
    width: 100%;
    height: 100%;
  }
  .btn-row {
    margin: 15px 0;
  }
}
</style>